<template>
    <div class="Navigation">
        <el-breadcrumb :separator-icon="ArrowRight">
            <el-breadcrumb-item>{{ label1 }}</el-breadcrumb-item>
            <el-breadcrumb-item>
                <template #default="scope">
                    <div style="font-size: 14px; position: relative;right: 12px;">
                         {{ label2 }}
                    </div>
                </template>
            </el-breadcrumb-item>
        </el-breadcrumb>
    </div>
</template>

<script setup name="Navigation">
import { ArrowRight } from '@element-plus/icons-vue'
defineProps(['label1','label2'])
</script>

<style >
.Navigation{
    background-color: white;
    height: 40px;
    margin-bottom: 10px;
    padding-left: 10px;
    box-shadow: 1px 1px 2px rgb(67, 92, 219);
}
.el-breadcrumb__inner{
    font-size: 16px;
    line-height: 40px;
    color: #30379be3;
}
.el-breadcrumb__separator{
    font-size: 16px;
    position: relative;
    right: 7px;
}
</style>